<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EasyUI-Theme-新主题</title>
		<link type="text/css" rel="stylesheet" href="css/themes/sentox/easyui.css"/>
		
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
		<script type="text/javascript">
			//滚动条美化
			$(function(){
				$(".accd,.tabs-panels").niceScroll({cursorcolor: "#1ab394",cursoropacitymax: 1,touchbehavior: false,cursorwidth: "5px",cursorborder: "0",cursorborderradius: "5px",autohidemode: false});
			});
			
		</script>
	</head>
	
	<body class="easyui-layout">
		<!-- 弹出层 -->
		<div id="dd"></div>
		<!-- 弹出窗口 -->
		<div id="w2" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">
			The window content.
		</div>
		
		<!-- 顶部	START -->
		<div class="north" data-options="region:'north'">
			<div class="logo"></div>
			<div class="in_loginInfo">
				<div class="in_headInfo"></div>
				<div class="in_userInfo">
					Administrator
					<select class="easyui-combobox" style="width:100px;">
						<option value="AL">个人信息</option>
						<option value="AK">返回首页</option>
						<option value="AZ">退出</option>
					</select>
				</div>
			</div>
		</div>
		<!-- 顶部	END -->
		
		<!-- 左侧导航	START -->
		<div class="west" data-options="region:'west', border:false">
			<div id="aa" class="easyui-accordion" data-options="fit:true, border:false">
				<div class="accd" title="新主题" data-options="iconCls:'fa fa-paint-brush fa-yxa1', selected:true">   
			        <ul class="nav-l">
			        	<li onclick="navGo('Panel','plugins/Panel.html','star')"><i class="fa fa-star fa-yxa2"></i>Panel</li>
			        	<li onclick="navGo('Accordion','plugins/Accordion.html','star')"><i class="fa fa-star fa-yxa2"></i>Accordion</li>
			        	<li onclick="navGo('Tabs','plugins/Tabs.html','star')"><i class="fa fa-star fa-yxa2"></i>Tabs</li>
			        	<li onclick="navGo('Layout','plugins/Layout.html','star')"><i class="fa fa-star fa-yxa2"></i>Layout</li>
			        	<li onclick="navGo('DataGrid','plugins/DataGrid.html','star')"><i class="fa fa-star fa-yxa2"></i>DataGrid</li>
			        	<li onclick="navGo('PropertyGrid','plugins/PropertyGrid.html','star')"><i class="fa fa-star fa-yxa2"></i>PropertyGrid</li>
			        	<li onclick="navGo('Tree','plugins/Tree.html','star')"><i class="fa fa-star fa-yxa2"></i>Tree</li>
			        	<li onclick="navGo('TreeGrid','plugins/TreeGrid.html','star')"><i class="fa fa-star fa-yxa2"></i>TreeGrid</li>
			        	<li onclick="navGo('LinkButton','plugins/LinkButton.html','star')"><i class="fa fa-star fa-yxa2"></i>LinkButton</li>
			        	<li onclick="navGo('Menu','plugins/Menu.html','star')"><i class="fa fa-star fa-yxa2"></i>Menu</li>
			        	<li onclick="navGo('MenuButton','plugins/MenuButton.html','star')"><i class="fa fa-star fa-yxa2"></i>MenuButton</li>
			        	<li onclick="navGo('ProgressBar','plugins/ProgressBar.html','star')"><i class="fa fa-star fa-yxa2"></i>ProgressBar</li>
			        	<li onclick="navGo('SearchBox','plugins/SearchBox.html','star')"><i class="fa fa-star fa-yxa2"></i>SearchBox</li>
			        	<li onclick="navGo('Form','plugins/Form.html','star')"><i class="fa fa-star fa-yxa2"></i>Form</li>
			        	<li onclick="navGo('TextBox','plugins/TextBox.html','star')"><i class="fa fa-star fa-yxa2"></i>TextBox</li>
			        	<li onclick="navGo('FileBox','plugins/FileBox.html','star')"><i class="fa fa-star fa-yxa2"></i>FileBox</li>
			        	<li onclick="navGo('ComboBo','plugins/ComboBo.html','star')"><i class="fa fa-star fa-yxa2"></i>ComboBo</li>
			        	<li onclick="navGo('ComboBox','plugins/ComboBox.html','star')"><i class="fa fa-star fa-yxa2"></i>ComboBox</li>
			        	<li onclick="navGo('ComboGrid','plugins/ComboGrid.html','star')"><i class="fa fa-star fa-yxa2"></i>ComboGrid</li>
			        	<li onclick="navGo('ComboTree','plugins/ComboTree.html','star')"><i class="fa fa-star fa-yxa2"></i>ComboTree</li>
			        	<li onclick="navGo('NumberBox','plugins/NumberBox.html','star')"><i class="fa fa-star fa-yxa2"></i>NumberBox</li>
			        	<li onclick="navGo('NumberSpinner','plugins/NumberSpinner.html','star')"><i class="fa fa-star fa-yxa2"></i>NumberSpinner</li>
			       		<li onclick="navGo('Calendar','plugins/Calendar.html','star')"><i class="fa fa-star fa-yxa2"></i>Calendar</li>
			       		<li onclick="navGo('DateBox','plugins/DateBox.html','star')"><i class="fa fa-star fa-yxa2"></i>DateBox</li>
			       		<li onclick="navGo('DateTimeBox','plugins/DateTimeBox.html','star')"><i class="fa fa-star fa-yxa2"></i>DateTimeBox</li>
			       		<li onclick="navGo('Slider','plugins/Slider.html','star')"><i class="fa fa-star fa-yxa2"></i>Slider</li>
			       		<li onclick="navGo('ValidateBox','plugins/ValidateBox.html','star')"><i class="fa fa-star fa-yxa2"></i>ValidateBox</li>
			       		<li onclick="navGo('Window','plugins/Window.html','star')"><i class="fa fa-star fa-yxa2"></i>Window</li>
			       		<li onclick="navGo('Dialog','plugins/Dialog.html','star')"><i class="fa fa-star fa-yxa2"></i>Dialog</li>
			       		<li onclick="navGo('Messager','plugins/Messager.html','star')"><i class="fa fa-star fa-yxa2"></i>Messager</li>
			       		<li onclick="navGo('Draggable','plugins/Draggable.html','star')"><i class="fa fa-star fa-yxa2"></i>Draggable</li>
			        </ul>
			    </div> 
			    <div class="accd" title="权限系统" data-options="iconCls:'fa fa-unlock-alt fa-yxa1'">   
			        <ul class="nav-l">
			        	<li><i class="fa fa-users fa-yxa2"></i>用户管理</li>
			        	<li><i class="fa fa-graduation-cap fa-yxa2"></i>角色管理</li>
			        	<li><i class="fa fa-sitemap fa-yxa2"></i>组织机构</li>
			        	<li><i class="fa fa-newspaper-o fa-yxa2"></i>页面管理</li>
			        	<li><i class="fa fa-gears fa-yxa2"></i>菜单设置</li>
			        </ul>
			    </div> 
			    <div class="accd" title="门户信息" data-options="iconCls:'fa fa-tv fa-yxa1'">   
			        <ul class="nav-l">
			        	<li><i class="fa fa-users fa-yxa2"></i>新闻咨询</li>
			        	<li><i class="fa fa-graduation-cap fa-yxa2"></i>产品信息</li>
			        	<li><i class="fa fa-bank fa-yxa2"></i>图片管理</li>
			        </ul>
			    </div>
			</div>  
		</div>
		<!-- 左侧导航	END -->
		
		<!-- 中间内容区	START -->
		<div class="mainBox" data-options="region:'center'">
			<!-- Tab选项卡	START -->
			<div id="tt" class="easyui-tabs" data-options="border:false,fit:true,narrow:true">
				<!-- 初始化Tab项	START -->
				<div data-options="region:'center',title:'工作台',iconCls:'fa fa-tv fa-yxb1',href:'index.html'"></div>  
				<!-- 初始化Tab项	END -->
			</div>
			<!-- Tab选项卡	END -->
		</div>
		<!-- 中间内容区	END -->
	</body>
	<script type="text/javascript">
		//左侧菜单-点击-变色
		$(".nav-l > li").on("click",function(){
			$(".nav-l > li").removeClass("nav-c");
			$(this).addClass("nav-c");
		});
		
		//左侧菜单-点击-加载Tab
		function navGo(title, url, ico) {
			ico = "fa fa-"+ico+" fa-yxb1";
			if ($('#tt').tabs('exists', title)) {
				$('#tt').tabs('select', title);
			} else {
				var content = '<iframe class="ttifr" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%; height:99%;"></iframe>';
				$('#tt').tabs('add', {
					title : title,
					content : content,
					closable : true,
					iconCls : ico
				});
			}
		}
	</script>
</html>
